<template>
	<section class="body">
		<!-- body-colors -->
		<div class="body-colors box-color">
			<div class="color body-color-1 first-active"></div>
			<div class="color body-color-2"></div>
			<div class="color body-color-3"></div>
			<div class="color body-color-4"></div>
			<div class="color body-color-5"></div>
			<div class="color body-color-6"></div>
			<div class="color body-color-7"></div>
			<div class="color body-color-8"></div>
		</div>
		<!-- materialContainer -->
		<div class="materialContainer">
			<div class="phoneBox">
				<!-- phoneInfo -->
				<div class="phoneInfo">
					<div class="phoneInfo-colors box-color">
						<div class="color phoneInfo-color-1 first-active"></div>
						<div class="color phoneInfo-color-2"></div>
						<div class="color phoneInfo-color-3"></div>
						<div class="color phoneInfo-color-4"></div>
						<div class="color phoneInfo-color-5"></div>
						<div class="color phoneInfo-color-6"></div>
						<div class="color phoneInfo-color-7"></div>
						<div class="color phoneInfo-color-8"></div>
					</div>
				</div>
				<!-- header -->
				<header>
					<div class="header-colors box-color">
						<div class="color header-color-1 first-active"></div>
						<div class="color header-color-2"></div>
						<div class="color header-color-3"></div>
						<div class="color header-color-4"></div>
						<div class="color header-color-5"></div>
						<div class="color header-color-6"></div>
						<div class="color header-color-7"></div>
						<div class="color header-color-8"></div>
					</div>
				</header>
				<!-- phoneSingle -->
				<div class="phoneSingle"></div>
				<!-- materialButton -->
				<div class="materialButton">
					<div class="scale">
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
						<div class="scaleColor"></div>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>
<script type="text/javascript">
	import $ from 'jquery'
	export default {
		methods: {
			init () {
				$(window).resize(function () {
					$(".phoneBox .phoneSingle").height(parseInt(($(window).height() / 100) * 70))
				})

				$('.phoneBox .phoneSingle').height(parseInt(parseInt($(window).height() / 100) * 70))

				$('.body-colors').css({
					top: $('.materialButton').offset().top + 'px',
					left: $('.materialButton').offset().left + 'px'
				})

				$('.phoneInfo-colors,.header-colors').each(function () {
					let top  = $('.materialButton').offset().top - $(this).offset().top,
						left = $('.materialButton').offset().left - $(this).offset().left

					$(this).css({
						top: top + 'px',
						left: left + 'px'
					})
				})

				$('.materialButton').click(function () {
					if ($('.phoneBox .materialButton').hasClass('active')) {
						$('.phoneBox .materialButton').removeClass('active')
						for (let i = 1, len = 9; i < len; i++) {
							$('.phoneBox .materialButton .scale .scaleColor:nth-child('+ i +')').delay((i * 50) - 100).animate({
								height: 0,
								marginTop: -0
							}, 300)
						}
					} else {
						$('.phoneBox .materialButton').addClass('active')
						for (let i = 1, len = 9; i < len; i++) {
							$('.phoneBox .materialButton .scale .scaleColor:nth-child('+ i +')').delay((i * 50) - 100).animate({
								height: 50,
								marginTop: -25
							}, 300)
						}
					}
				})

				$('.materialButton .scale .scaleColor').click(function () {
					$('.color').removeClass('active').addClass('no-active')

					$('.header-colors .header-color-' + ($(this).index() + 1)).each(function () {
						$(this).addClass('active').removeClass('no-active').animate({
							width: 3000,
							height: 3000
						}, 1500)
					})

					$('.phoneInfo-colors .phoneInfo-color-' + ($(this).index() + 1)).each(function () {
						$(this).addClass('active').removeClass('no-active').animate({
							width: 3000,
							height: 3000
						}, 1500)
					})
					
					$('.body-colors .body-color-' + ($(this).index() + 1)).each(function () {
						$(this).addClass('active').removeClass('no-active').animate({
							width: 3000,
							height: 3000
						}, 1500)
					})
					
					setTimeout(function () {
						$('.color.no-active').width(0)
						$('.color.no-active').height(0)
					}, 1500)
				})

				// setTimeout(function () {
				// 	$('.materialButton').click()
				// }, 1500)

				// setTimeout(function () {
				// 	$('.materialButton .scale .scaleColor').eq(4).click()
				// }, 3000)
			}
		},
		mounted () {
			this.init()
		}
	}
</script>
<style lang="scss" scoped>
	$color1-1: #E57373;
	$color1-2: #D32F2F;
	$color1-3: #F44336;
	
	$color2-1: #BA68C8;
	$color2-2: #7B1FA2;
	$color2-3: #9C27B0;
	
	$color3-1: #7986CB;
	$color3-2: #303F9F;
	$color3-3: #3F51B5;

	$color4-1: #4FC3F7;
	$color4-2: #0288D1;
	$color4-3: #03A9F4;

	$color5-1: #4DB6AC;
	$color5-2: #00796B;
	$color5-3: #009688;

	$color6-1: #AED581;
	$color6-2: #689F38;
	$color6-3: #8BC34A;

	$color7-1: #FFF176;
	$color7-2: #FBC02D;
	$color7-3: #FFEB3B;

	$color8-1: #FFB74D;
	$color8-2: #F57C00;
	$color8-3: #FF9800;

	.body {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}
	*,
	*:after,
	*::before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		text-decoration: none;
		list-style-type: none;
		outline: none;
	}

	.phoneBox {
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
			0 3px 6px rgba(0, 0, 0, 0.23);
		&,
		.phoneInfo,
		header,
		.phoneSingle {
			position: relative;
			float: left;
			width: 100%;
		}
		.phoneInfo {
			height: 20px;
			overflow: hidden;
		}
		header {
			height: 70px;
			overflow: hidden;
		}
		.materialButton {
			width: 60px;
			height: 60px;
			background: #FC4B6B;
			border-radius: 50%;
			position: absolute;
			right: 30px;
			top: 60px;
			z-index: 2;
			cursor: pointer;
			&:before,
			&:after {
				content: "";
				background: #fff;
				z-index: 2;
				position: absolute;
				top: 50%;
				left: 50%;
				transition: 200ms cubic-bezier(.4, 0, .2, 1);
				transform: translate(-50%, -50%);
			}
			&.active {
				&:before,
				&:after {
					transform: translate(-50%, -50%) rotate(45deg);
				}
			}
			&:before {
				width: 15px;
				height: 3px;
			}
			&:after {
				width: 3px;
				height: 15px;
			}
			.scale {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				&:before {
					content: "";
					width: 60px;
					height: 60px;
					background: #FC4B6B;
					border-radius: 50%;
					box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
						0 3px 6px rgba(0, 0, 0, 0.23);
					z-index: 2;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
				.scaleColor {
					width: 25px;
					height: 0px;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 
						0 1px 2px rgba(0, 0, 0, 0.24);
					position: absolute;
					top: 50%;
					left: 50%;
					margin-top: -0px;
					margin-left: -12.5px;
					border-radius: 25px;
					transition: 200ms cubic-bezier(.4, 0, .2, 1);
					transform: rotate(0deg) translate(0px, 50%);
					&:hover {
						height: 55px !important;
						margin-top: -27.5px !important;
					}
					&:nth-child(1) {
						transform: rotate(90deg) translate(0px, 50%);
						background: $color1-3;
					}
					&:nth-child(2) {
						transform: rotate(135deg) translate(0px, 50%);
						background: $color2-3;
					}
					&:nth-child(3) {
						transform: rotate(180deg) translate(0px, 50%);
						background: $color3-3;
					}
					&:nth-child(4) {
						transform: rotate(225deg) translate(0px, 50%);
						background: $color4-3;
					}
					&:nth-child(5) {
						transform: rotate(270deg) translate(0px, 50%);
						background: $color5-3;
					}
					&:nth-child(6) {
						transform: rotate(315deg) translate(0px, 50%);
						background: $color6-3;
					}
					&:nth-child(7) {
						transform: rotate(360deg) translate(0px, 50%);
						background: $color7-3;
					}
					&:nth-child(8) {
						transform: rotate(405deg) translate(0px, 50%);
						background: $color8-3;
					}
				}
			}
		}
		.phoneSingle {
			background: #fff;
		}
	}
	.box-color {
		width: 60px;
		height: 60px;
		position: absolute;
		border-radius: 50%;
	}
	.color {
		width: 0px;
		height: 0px;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		&.first-active {
			width: 5000px;
			height: 5000px;
		}
		.color.active {
			z-index: 2;
		}
		// color1
		&.body-color-1 {
			background: $color1-1;
		}
		&.phoneInfo-color-1 {
			background: $color1-2;
		}
		&.header-color-1 {
			background: $color1-3;
		}
		// color2
		&.body-color-2 {
			background: $color2-1;
		}
		&.phoneInfo-color-2 {
			background: $color2-2;
		}
		&.header-color-2 {
			background: $color2-3;
		}
		// color3
		&.body-color-3 {
			background: $color3-1;
		}
		&.phoneInfo-color-3 {
			background: $color3-2;
		}
		&.header-color-3 {
			background: $color3-3;
		}
		// color4
		&.body-color-4 {
			background: $color4-1;
		}
		&.phoneInfo-color-4 {
			background: $color4-2;
		}
		&.header-color-4 {
			background: $color4-3;
		}
		// color5
		&.body-color-5 {
			background: $color5-1;
		}
		&.phoneInfo-color-5 {
			background: $color5-2;
		}
		&.header-color-5 {
			background: $color5-3;
		}
		// color6
		&.body-color-6 {
			background: $color6-1;
		}
		&.phoneInfo-color-6 {
			background: $color6-2;
		}
		&.header-color-6 {
			background: $color6-3;
		}
		// color7
		&.body-color-7 {
			background: $color7-1;
		}
		&.phoneInfo-color-7 {
			background: $color7-2;
		}
		&.header-color-7 {
			background: $color7-3;
		}
		// color8
		&.body-color-8 {
			background: $color8-1;
		}
		&.phoneInfo-color-8 {
			background: $color8-2;
		}
		&.header-color-8 {
			background: $color8-3;
		}
	}
	.materialContainer {
		width: 100%;
		max-width: 380px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}
	.row {
		margin: 0 -20px;
	}
</style>